<html> 
<head> 
 <title>HTML 文档结构 </title> 
</head> 
<body> 
 <div class="group">
    <input type="text" class="todovalue" name="todovalueName" placeholder="请输入TODO内容" onkeydown="valueChange(event)"/>
    <input type="button" value="Button2" onclick="handleClick()"></input>
    <button type="button" id="button3">Button3</button>
  <div id="todoList">
    <div>
        <!-- <div class="item" onmouseenter="test1(0)" onmouseleave="test2(0)"> -->
        <div class="item" id="item0">
        
        <input class="item-chk"type="checkbox" />
        <div class="item-sp">吃饭1</div>
        <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(0)"></input>
        </div>
    </div>
        <div class="item" id="item1">
       
        
        <input class="item-chk"type="checkbox" />
        <div class="item-sp">吃饭2</div>
        <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(1)"></input>
        </div>
        <div class="item" id="item2">
       
        
            <input class="item-chk"type="checkbox" />
            <div class="item-sp">吃饭33</div>
            <input id="item-del-2" class="item-del" type="button" value="删除" onclick="handleDelClick(2)"></input>
        </div>
  </div>
 </div>
</body> 
<style>
    body{
        display:flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .group{
        border:1px solid blue;
        padding: 10px;
        border-radius: 20px;

    }
    .item{
        /* 透明度 */
        /* opacity: 0;  */
        /* background-color: rgba(red, green, blue, alpha); */
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .item:hover{
        background-color: aqua;
        transform: scale(1.2);
    }
    .item-sp{
        flex-grow:1;
    }
    .item:hover.item-del{
        opacity: 1;
    }
    .item-del{
        background-color: red;
        border: 0px;
        color: aliceblue;
        align-content: center;
    }
    .todovalue{
        border:  2px soild #3333;
        padding:  6px;
        outline:none;
    }
    .todovalue:fouce{
       
        box-shadow: 0px 0px 9px #4086cd;
        border: 2px soild #4086cd;
        outline:none;
    }
</style>
<script lang="javascript">
    var index=0;
    function init(){
       document.getElementById("button3").onclick=handleClick;
    //    document.getElementById("input").keydown(function(event){
    //     if(event.keyCode==13){
    //         document.getElementById("todevalue")[0].value;
    //     }
    //    })
       
    }
    function valueChange(e){
        console.log(e);
        if(event.keyCode==13){
            handleClick();
        }
    }
    function handleClick(){
        var temp=document.getElementsByName("todovalueName")[0].value;
        //alert("我被按住了"+temp);
        //var t=document.getElementById("todoList").innerHTML;
        //document.getElementById("todoList").innerHTML=t+"<div>"+temp+"</div>";
        var div=document.createElement("div");
        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"

        index++;
        //div.innerText=temp;
        //document.getElementById("todoList").innerHTML+=div;
        //document.getElementById("todoList").append(div);
        document.getElementById("todoList").innerHTML += t
    }
    function test1(index){
        //console.log("test11111");
        //document.getElementById("todoList").children[index].style="backgrond-color:red";
        //document.getElementById("item-del-"+index).style="opacity:1;";
    }
    function test2(index){
        //console.log("test22222");
        //document.getElementById("todoList").children[index].style="";
        //document.getElementById("item-del-"+index).style="opacity:0;";
    }
    function handleDelClick(index){
        var arr=document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item"+index).remove();
    }
    init();
</script>
</html>